
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Include layui CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .layui-row {
            margin-bottom: 10px;
        }
        .layui-col-md6,
        .layui-col-sm6,
        .layui-col-xs12 {
            margin-bottom: 10px;
        }
        .layui-select option[value="-1"] {
            color: white;
        }
        /* Added CSS */
        #preview-container {
            width: 100px;
            height: 100px;
            position: relative;
            border: 1px solid transparent; /* Set border color to transparent */
        }

        #image-overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #preview-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .layui-input {
            width: 55%;
        }
        #stuGender {
            margin-left: -200px;
        }
        body{
            font-family: "微软雅黑", sans-serif;
            /* 其他字体样式属性 */
            height: 100%;
        }
        #add{
            border: 1px solid black;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* 其他样式属性 */
        }
        #hh{
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            background-color: #f2f2f2;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        #image-overlay{
            margin-top: 10px;
            border: 1px solid azure;
        }

    </style>

</head>
<body>
<div id="add" style="width: 800px;margin: auto">
    <div><h1 id="hh" align="center" style="height: 42px" >修改人员</h1></div>
    <form action="#" id="fm">
        <div style="margin-left: 5px" class="layui-container" >

            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <label class="layui-form-label" style="margin-top: 30px"></label>
                        <div class="layui-input-block">
                            <label id="image-upload-label" for="image-upload" class="layui-btn" style="margin-top: 45px;">点击选择头像</label>
                            <input type="file" id="image-upload" style="display: none;">
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6" style="margin-left: -122px"  >
                        <div id="preview-container">
                            <div id="image-overlay">
                                <img id="preview-image" name="staffImg" src="" alt="选择头像" class="layui-upload-img">
                                <div id="image-text"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 姓名性别 -->
                <div class="layui-row">
                    <!-- ... 其他表单项 ... -->
                </div>
                <!-- ... 其他表单项 ... -->
            </div>
            <!-- 姓名性别 -->
            <div class="layui-row">
                <div class="layui-col-md6 layui-col-sm6">
                    <label class="layui-form-label">姓名:</label>
                    <div class="layui-input-block">
                        <input id="staffName" placeholder="name" type="text" class="layui-input"  name="staffName">
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-sm6" id="stuGender">
                    <label  class="layui-form-label">性别:</label>
                    <div class="layui-input-block" style="margin-top: 10px">
                        <input type="radio" name="staffSex" value="1" title="男" >  男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="staffSex" value="0" title="女">   女
                    </div>
                </div>
                <!-- 生日身份证 -->
                <div class="layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <label class="layui-form-label"  >年龄</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="staffAge" placeholder="age" name="staffAge">
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6" style="margin-left: -200px">
                        <label class="layui-form-label" >电话:</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="staffPhone" placeholder="phone" name="staffPhone">
                        </div>
                    </div>
                </div>
                <!-- 电话邮箱 -->
                <div class="layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <label class="layui-form-label">身份证:</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input"  readOnly="true"  placeholder="IdentityCard"name="staffIdentityCard">
                        </div>
                    </div>
                </div>
                <!-- 地址.籍贯 -->
                <!-- 地址 -->
                <div class="layui-row" style="width: 1241px">
                    <div class="layui-col-xs12">
                        <label class="layui-form-label">银行卡号:</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input"  style="display: none" placeholder="staffId" id="staffId" name="staffId">
                            <input type="text" class="layui-input"  placeholder="staffBankCard" id="staffBankCard" name="staffBankCard">
                        </div>
                    </div>
                </div>
                <!-- 民族,学历,政治面貌,学习状况 -->
                <div class="layui-row">
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-sm6">
                            <label class="layui-form-label">学历:</label>
                            <div class="layui-input-block">
                                <select name="staffEducationBackground" id="staffEducationBackground" lay-filter="department" style="width: 200px" class="layui-select">
                                    <option value="-1" style="color: white;">请选择</option>
                                    <option value="1">小学</option>
                                    <option value="2">中学</option>
                                    <option value="3">大学</option>
                                    <option value="4">研究生</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- 部门 -->
                <div class="layui-row">
                    <div class="layui-col-md6 layui-col-sm6">
                        <label class="layui-form-label">所在部门:</label>
                        <div class="layui-input-block">
                            <select name="staffDepartmentId" id="staffDepartmentId" lay-filter="department" style="width: 200px" class="layui-select">
                                <option value="-1">请选择</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-sm6" style="margin-left: -148px">
                        <label class="layui-form-label">工种:</label>
                        <div class="layui-input-block">
                            <select name="staffType" id="staffType" lay-filter="position" style="width: 200px" class="layui-select">
                                <option value="-1">请选择</option>
                                <option value="1">正式工</option>
                                <option value="2">实习工</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-sm6">
                            <label class="layui-form-label">职位:</label>
                            <div class="layui-input-block">
                                <select name="staffPosition" id="staffPosition" lay-filter="department" style="width: 200px" class="layui-select">
                                    <option value="-1" style="color: white;">请选择</option>
                                    <option value="0">职员</option>
                                    <option value="1">组长</option>
                                    <option value="2">车间主任</option>
                                    <option value="3">厂长</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </form>
    <div class="layui-row move-right" style="margin-left: -390px">
        <div class="layui-col-md6 layui-col-sm6">
            <!-- ... Existing code ... -->
        </div>
        <div class="layui-col-md6 layui-col-sm6">
            <!-- ... Existing code ... -->

            <div class="layui-input-block"  style="margin-top: 10px;margin-left: -90px" >
                <!-- Save Information Button -->
                <button id="saveTheMessage"class="layui-btn" lay-submit lay-filter="saveInfo" onclick="saveTheMessage()" >保存信息</button>

                <!-- Cancel Button -->
                <button class="layui-btn layui-btn-primary" onclick="todisplaypersonnel()">返回</button>
            </div>
        </div>
    </div>
</div>
<!-- Include layui JavaScript -->
<script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script>
<script>
    let id = ${param.id}
        selectStaffDepartment()
    toid()
    function todisplaypersonnel() {
        window.location.href="todisplaypersonnel";
    }
    function selectStaffDepartment(){
        var previewImage = document.getElementById('preview-image');
        var staffImg = previewImage.getAttribute('src');
        $.ajax({
            "url": "${pageContext.request.contextPath}/staff/selectStaffDepartment",
            "type": "post",
            "data": {} ,
            "dataType": "json",
            "success": function(result) {
                let temp=""
                for (let i in result){
                    temp+=`
                    <option value="\${result[i].id}">\${result[i].staffDepartment}</option>
                    `
                }
                $('#staffDepartmentId').append(temp)
            },
            "error": function() {
                layer.alert("网络正忙")
            }
        });
    }
    layui.use(['form'], function () {
        var form = layui.form;
        // Render form elements
        form.render();
        // 预览上传的图片
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#preview-image').attr('src', e.target.result);
                    $('#preview-container').removeClass('no-image');
                    resizeImage(document.getElementById('preview-image'), 300, 300);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        // 监听文件选择变化的事件
        $('#image-upload').on('change', function () {
            previewImage(this);
        });

    });
    function saveTheMessage() {
        $('input[name=staffId]').val(id)
        // Check if the avatar frame has an image
        //获取img的src地址
        var hasImage = ($('#preview-image').attr('src') !== '');
        //获取姓名
        var name = $('input[name=staffName]').val()
        //获取年龄
        var age = $('input[name=staffAge]').val()
        //获取性别
        var gender = $('input[name=staffSex]:checked').val();
        //获取手机号
        var staffPhone = $('input[name=staffPhone]').val();
        //获取身份证
        var staffIdentityCard = $('input[name=staffIdentityCard]').val();
        //获取地址
        var staffSite = $('input[name=staffSite]').val();
        //获取学历
        var staffEducationBackground = $('#staffEducationBackground').val();
        //获取部门
        var stafDepartment = $('#stafDepartment').val();
        //工种
        var staffType = $('#staffType').val();
        //职位
        var staffPosition = $('#staffPosition').val();
        //工商银行卡
        var staffBankCard = $('#staffBankCard').val();
        //工商银行卡的正则表达式
        const icbcCardNumberRegex = /^(\d{16}|\d{19})$/;
        //身份证正则表达式
        var staffIdentityCardpattern = /\d{17}[\d|x]|\d{15}/;
        //手机正则表达式
        var phonePattern = /0?(13|14|15|18)[0-9]{9}/;
        if (!hasImage){
            layer.msg('头像不能为空', {icon: 0})
        }else
        if (name=="" || name ==null){
            layer.msg('姓名不能为空', {icon: 0})
        }else
        if (age == "" || age == null ) {
            layer.msg('年龄不能为空', {icon: 0});
        }else
        if (age <0 || age >140 ) {
            layer.msg('年龄不合理', {icon: 0});
        }else
        if(staffPhone==null ||staffPhone==""){
            layer.msg('手机号不能为空', {icon: 0});
        }else
        if(!phonePattern.test(staffPhone)){
            layer.msg('手机号格式不对', {icon: 0});
        }else
        if(staffIdentityCard==""||staffIdentityCard==null){
            layer.msg('身份证不能为空', {icon: 0});
        }else
        if(!staffIdentityCardpattern.test(staffIdentityCard)){
            layer.msg('身份证格式不对', {icon: 0});
        }else
        if (staffBankCard == "" || staffBankCard == null ) {
            layer.msg('银行卡号不能为空', {icon: 0});
        }else
        if(!icbcCardNumberRegex.test(staffBankCard)){
            layer.msg('银行卡号格式不对', {icon: 0});
        }else
        if(staffEducationBackground=="-1"){
            layer.msg('学历不能为空', {icon: 0});
        }
        else
        if(staffType=="-1"){
            layer.msg('工种不能为空', {icon: 0});
        }else
        if(stafDepartment=="-1"){
            layer.msg('部门不能为空', {icon: 0});
        }else
        if(staffPosition=="-1"){
            layer.msg('职位不能为空', {icon: 0});
        }
        else{
            updateStaff()
        }
    }
    function toid() {
        $.ajax({
            "url": "${pageContext.request.contextPath}/staff/selectIdStaff",
            "type": "post",
            "data": {id:id} ,
            "dataType": "json",
            "success": function(result) {

                var imageUrl = result[0].staffImg; // 替换为你的图像URL
                var previewImage = document.getElementById("preview-image");
                previewImage.src = imageUrl;
                $('input[name=staffName]').val(result[0].staffName)
                //获取年龄
                $('input[name=staffAge]').val(result[0].staffAge)
                //获取性别
                if (result[0].staffSex == "1") {
                    $('input[name=staffSex][value="1"]').prop('checked', true);
                } else if(result[0].staffSex == "0"){
                    $('input[name=staffSex][value="0"]').prop('checked', true);
                }
                //获取手机号
                $('input[name=staffPhone]').val(result[0].staffPhone);
                //获取身份证
                $('input[name=staffIdentityCard]').val(result[0].staffIdentityCard);
                //获取地址
                $('input[name=staffSite]').val(result[0].stafstaffSitefAge);
                //获取学历
                $('#staffEducationBackground').val(result[0].staffEducationBackground);
                //获取部门
                $('#staffDepartmentId').val(result[0].staffDepartmentId);
                //工种
                $('#staffType').val(result[0].staffType);
                //职位
                $('#staffPosition').val(result[0].staffPosition);
                //工商银行卡
                $('#staffBankCard').val(result[0].staffBankCard);


            },
            "error": function() {
                layer.alert("网络正忙")
            }
        })
    }
</script>
<script>
    function updateStaff() {
        data = {};
        let array = $("#fm").serializeArray();
        for (var i = 0; i < array.length; i++) {
            data[array[i].name] = array[i].value;
        }
        let stu = JSON.stringify(data);
        var previewImage = document.getElementById('preview-image');
        var staffImg = previewImage.getAttribute('src');
        var layer = layui.layer;
        data.stu = stu;
        data.staffImg = staffImg;
        alert(data)
        $.ajax({
            "url": "${pageContext.request.contextPath}/staff/updateStaffController",
            "type": "post",
            "data":  JSON.stringify(data),
            "dataType": "json",
            "contentType":"application/json;charset=utf-8",
            "success": function(result) {
                if (result>0){
                    window.location.href="todisplaypersonnel";
                }
            },
            "error": function() {
                layer.alert("网络正忙")
            }
        });
    }
</script>
</body>
</html>